<!DOCTYPE html>
<html lang="zxx" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="/static/assets/css/fontawesome-all-min.css">
    <link rel="stylesheet" href="/static/assets/css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="/static/assets/css/animate.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
          rel="stylesheet">
    <link rel="stylesheet" href="/static/assets/css/animate.css" type="text/css">
    <link rel="stylesheet" href="/static/assets/css/slick-slider/slick-theme.css" type="text/css">
    <link rel="stylesheet" href="/static/assets/css/slick-slider/slick.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="/static/assets/css/custom.css">
    <link rel="stylesheet" type="text/css" href="/static/assets/css/media-query.css">
    <link rel="icon" type="image/png" href="/static/img/icon.png"/>
    <link href="/static/js/owl/owl.carousel.css" rel="stylesheet" />
    <link href="/static/js/owl/owl.theme.css" rel="stylesheet" />
    <title></title>
    <style>
        a.item{
            text-decoration: none;
        }
        .item-box{
            margin: 0px 20px;
        }
        .item-box-info{
            font-weight: 400;
            color: #333;
            margin-top: 10px;
        }
        .item-box-info h3{
            font-weight: 400;
        }
        .item-box-info p{
            font-weight: 400;
            font-size: 14px;
        }
        .detail{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp:5;
        }
        .item-box-img{
            height: 240px;
            object-fit: cover;
            background: #fff;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .item-box-img img{
            width: 80%;
        }
        .item-box-info h3 {
            font-size: 16px;
        }
        .trheading h2{
            font-size: 28px;
            font-weight: 400;
        }
        .slick-slide.intro-next .testimonial-slider-img img,.slick-slide.slick-center .testimonial-slider-img img{
            object-fit: cover;
        }

        .tr-slider-image{
            background-size: cover;
            background-repeat: no-repeat;
        }

    </style>
</head>

<body data-spy="scroll" data-target="#myHeader">

<!-- Preloader -->
<div class="preloader">
    <div class="main-circle">
        <div class="second-circle">
            <div class="third-circle">
            </div>
        </div>
    </div>
</div>


<div id="wrap">
    <!-- Page Wrapper -->
    <div class="wrap-top-header-slider parallax parallax-image-1">
        <!-- shape-one -->
        <div class="shape-image-one col-5 col-lg-3 col-xl-4 wow fadeIn" data-wow-delay="1s">
            <img src="/static/assets/images/background-shape/shape-1.png" class="img-fluid" alt="The Animated background shape Image">
        </div>
        <!--End shape-one -->
        <!-- Start Header -->
        <header class="header" id="myHeader">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-6 col-md-4 col-lg-2">
                        <div class="logo">
                            <a href="/">
                                <img src="/static/img/logo.png" class="img-fluid" alt="艺术上海">
                            </a>
                        </div>
                    </div>
                    <div class="col-6 col-md-8 col-lg-10">
                        <!-- Nav -->
                        <nav class="navbar navbar-expand-lg nabar-own p-0">
                            <button class="navbar-toggler collapsed" type="button" data-toggle="collapse"
                                    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                                    aria-expanded="false" aria-label="Toggle navigation">
                                <span class="navbar-toggler-icon">
                                    <span class="menu_line_1"></span>
                                    <span class="menu_line_2"></span>
                                    <span class="menu_line_3"></span>
                                </span>
                            </button>
                            <div class="collapse navbar-collapse tr-nabar-collapse" id="navbarSupportedContent">
                                <ul class="navbar-nav mr-auto align-self-center">
                                    <li class="nav-item tr-nav-item"><a class="nav-link" href="/">首页</a>
                                    </li>
                                    <li class="nav-item tr-nav-item"><a class="nav-link" href="#TripPlanner">介绍</a>
                                    </li>
                                    <li class="nav-item tr-nav-item"><a class="nav-link" href="#Destination">作品</a>
                                    </li>
                                    <li class="nav-item tr-nav-item"><a class="nav-link" href="#Clients">艺术家</a>
                                    </li>


                                </ul>
<#--                                <div class="header-button d-none d-lg-inline-block">-->
<#--                                    <a class="btn" href="#contact">联系我们</a>-->
<#--                                </div>-->
                            </div>
                        </nav>
                    </div>
                </div>
            </div>
        </header>
        <!-- End Header -->
        <!-- start slider section -->
        <section class="padding trmain-slider" id="TripPlanner">
            <#if data.data.logo?length gt 1>
            <div class="tr-slider-image col-xl-5 col-lg-6 col-sm-6 col-7 p-0 img-fluid wow fadeIn"  style="background: url('${data.data.logo}'); height: 100vh;   background-size: cover; background-repeat: no-repeat" alt="the Girl on the beach - best destination Image" data-wow-delay="1s">

            </div>
                <#else>
                    <div class="tr-slider-image col-xl-5 col-lg-6 col-sm-6 col-7 p-0 img-fluid wow fadeIn" style="background: url('/static/assets/images/silders/slider-image.png'); height: 100vh; background-size: cover; background-repeat: no-repeat" alt="the Girl on the beach - best destination Image" data-wow-delay="1s">


            </div>
            </#if>
            <div class="container trtop-baner-content">
                <div class="row">
                    <div class="col-12 col-sm-11 col-md-9 col-lg-9 col-xl-10">
                        <div class="siider-content">

                            <h1 class="wow fadeInDown" id="companyName" data-wow-duration="1.5s" data-wow-delay=".4s">
                                ${data.data.name!''}
                            </h1>
                            <p class="wow fadeInDown"  id="detail" data-wow-duration="1s" data-wow-delay=".3s">
                                ${data.data.detail!''}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>



    <!-- start middle section-->
    <!-- start Experience Travel With Us -->
    <section class="padding position-relative margin-top parallax parallax-image-2" >
        <!-- shape-two -->
        <div class="shape-image-two">
            <img src="/static/assets/images/background-shape/dottd-squre.png" class="img-fluid" alt="the background decorated dotted square image">
        </div>
        <!--End shape-two -->

        <!-- shape-four -->
        <div class="shape-image-four">
            <img src="/static/assets/images/background-shape/round-shape.png" class="img-fluid" alt="the background round shape | with Animation">
        </div>
        <!--End shape-four -->
    </section>
    <!-- start choose category -->
    <section class="padding position-relative parallax parallax-image-3" id="Destination">
        <!-- shape-five -->
        <div class="shape-image-five wow fadeInLeft" data-wow-duration="3s">
            <img src="/static/assets/images/background-shape/shape-5.png" class="img-fluid" alt="decorated backgound shape image | Animated">
        </div>
        <!--End shape-five -->
        <div class="container">
            <!-- HEADING TITLE -->
            <div class="trheading wow fadeInDown" data-wow-duration="2s" data-wow-delay=".4s">
                <h2 class="mb-0">我们的艺术品</h2>
            </div>
            <div class="row">
                <div class="trsubHeading col-12 col-md-8 col-lg-6">
                    <p class="wow fadeIn mb-3 pb-md-0 pb-5" data-wow-duration="2s" data-wow-delay=".4s">.</p>
                </div>
            </div>
            <div class="position-relative wow fadIn" data-wow-duration="2s" data-wow-delay=".4s">
                <!-- shape-three -->
                <div class="shape-image-six">
                    <img src="/static/assets/images/background-shape/shape-3.png" class="img-fluid" alt="background shape image for the page decoration effects | with animation">
                </div>
                <!--End shape-three -->
                <!-- start image content -->

                <div  class="owl-carousel" id="owl-demo" >
<#--                    <#list product.data.records as item>-->
<#--                        <a class="item" href="/works/detail?productNo=${item.mainProductNo}" target="_blank"> <div class="item-box"> <div class="item-box-img"> <img src="${item.image}" alt=""> </div> <div class="item-box-info"> <h3>'${item.name}'</h3> <p>尺寸:${item.bizValue5}x:${item.bizValue6}cm</p> </div> </div> </a>-->
<#--                    </#list>-->
                </div>
<#--                <div class="slider category-slider" id="works">-->
<#--                    <div class="trCategoryItem">-->
<#--                        <div class="tr-image-class">-->
<#--                            <img src="/static/assets/images/category-slider/category-image-1.png" class="img-fluid"-->
<#--                                 alt="Mountain | Choose the best mountain destination">-->
<#--                            <div class="trCategoryButton"><a href="javascript:void(0);">Mountain</a> </div>-->
<#--                        </div>-->
<#--                    </div>-->
<#--                   -->
<#--                </div>-->
            </div>
        </div>
    </section>

    <!-- start Adventure Trip -->

    <!-- start Testimonials-->
    <section class="padding" id="Clients">
        <div class="container">
            <div class="trheading wow fadeInDown" data-wow-duration="2s" data-wow-delay=".4s">
                <h2 class="mb-0">我们的艺术家</h2>
            </div>

        </div>
        <div class="testimonial-bg">
            <div class="container">
                <div class="testimonial-slider justify-content-center">
                    <div class="slider slider-nav trtestimonial-nav" id="artist">
                        <#list artist.data.records as item>
                            <div class="testimonial-slider-img">
                                <img src="${item.headImg!''}" class="img-fluid" alt="${item.name!''}">
                            </div>
                        </#list>

                    </div>
                    <div class="slider slider-for col-12 col-lg-4 m-auto p-0">
                        <#list artist.data.records as item>
                            <div class="tr-testimonial-desc text-center">
                                <h3><a href="/artist/detail?artistNo=${item.artistNo!''}">${item.name!''}</a></h3>
                                <p>${item.detail!''}</p>
                            </div>
                        </#list>


                    </div>
                </div>
            </div>
        </div>
    </section>


    <!--start email-subscription (footer-top)-->

</div>
<!--end middle section-->

<!--start footer-->
<footer id="contact" class="position-relative wow fadeIn parallax parallax-image-5" data-wow-duration="2s" data-wow-delay=".4s">
    <div class="footershape-image-1">
        <img src="/static/assets/images/background-shape/footer-shap-1.png" class="img-fluid" alt="Footer shape | background shape image for the footer decoration">
    </div>
    <div class="footershape-image-3">
        <img src="/static/assets/images/background-shape/footer-shap-3.png" data-wow-duration="2s" data-wow-delay="1s" class="img-fluid  wow fadeInUp" alt="Footer shape round | background shape image for the footer decoration">
    </div>
<#--    <div class="footer-bottom">-->
<#--        <div class="container position-relative">-->
<#--            <div class="row">-->
<#--                <div class="col-12 col-md-12 col-lg-5">-->
<#--                    <div class="trFooter-logo">-->
<#--                        <h2>联系我们</h2>-->
<#--                        <p class="trFooter-desc">${data.data.addr!''}</p>-->
<#--                        <div class="trFooter-conatct"><a href="javascript:void(0);">${data.data.linkManName!''}${data.data.linkManTel!''}</a>-->
<#--                            <br><a href="javascript:void(0);">${data.data.addr!''}</a>-->

<#--                        </div>-->

<#--                    </div>-->
<#--                </div>-->
<#--                <div class="col-12 col-lg-1"></div>-->



<#--            </div>-->
<#--        </div>-->
<#--    </div>-->

</footer>
<!--end footer-->

<span class="scroll-top" data-scroll="up">
    <i class="fas fa-long-arrow-alt-up"></i>
</span>

<script src="/static/js/jquery-3.6.4.min.js"></script>
    <script src="/static/js/jquery-migrate.min.js"></script>
<script src="/static/js/jquery.cookie.js"></script>
<script src="/static/assets/js/wow.min.js"></script>
<script src="/static/assets/js/slick-slider/slick.min.js"></script>
<script src="/static/assets/js/slick-slider/slick.js"></script>
<script src="/static/assets/js/custom.js"></script>
<#--<script src="/static/assets/js/ajax-jquery.min.js"></script>-->
<script src="/static/js/common.js"></script>
<script type="text/javascript" src="/static/js/owl/owl.carousel.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->
<script>

    new WOW().init();

    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    function getDataList() {
        var page = 1;
        var rows = 500;
        var params = {
            page: page,
            rows: rows,
            companyNo: replaceStr(GetQueryString('companyNo'))
        };
        $.ajax({
            type: "POST",
            data: replaceStr(JSON.stringify(params)),
            url: baseUrl+'api/shop-center/app/prd/product/query',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            headers: {
                'lbv': '1.0'
            },
            success: function (res) {
                var htmls=''
                for(var i=0; i<res.data.records.length; i++){
                    var  html = ' <a class="item" href="/works/detail?productNo='+res.data.records[i].mainProductNo+'" target="_blank"> ' +
                            '<div class="item-box"> <div class="item-box-img"> <img src="'+res.data.records[i].image+'" alt=""> </div> ' +
                            '<div class="item-box-info"> <h3>'+res.data.records[i].name+'</h3><p>尺寸:'+res.data.records[i].bizValue18 +
                            'x:'+res.data.records[i].bizValue6;
                            if (res.data.records[i].bizValue5) {
                                html += 'x:' + res.data.records[i].bizValue5 + 'cm';
                            } else {
                                html += 'cm';
                            }
                            html += '</p> </div> </div> </a>'
                    htmls = htmls + html
                }

                $("#owl-demo").html(htmls)
                $('#owl-demo').owlCarousel({
                    // navigation: true,
                    // navigationText: ["上一个","下一个"]
                });

               // getArtistList();


            },
            error: function (res) {

            }
        });
    }

    function getPageData() {
        var params = {
            id: GetQueryString("companyNo")
        }
        $.ajax({
            type: "post",
            url: baseUrl+'api/user-center/app/user/company/info',
            data: replaceStr(JSON.stringify(params)),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            headers: {
                'lbv': '1.0'
            },
            success: function (res) {

                if (res.code == 0) {

                    $("#companyName").html(res.data.name)
                    $("#detail").html(res.data.detail)

                }

            },
            error: function (res) {
                isLoading = false;
            }
        });
    }
    function getArtistList() {
        $.ajax({
            type: "post",
            url: baseUrl+"/api/pty-center/app/art/artist/query",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: replaceStr(JSON.stringify({ companyNo: GetQueryString('companyNo') })),
            headers: {
                'lbv': '1.0'
            },
            success: function (res) {

                if (res.code == 0) {
                    var htmls=''
                    for(var i=0; i<res.data.records.length; i++){
                     var html = '<div class="testimonial-slider-img"> <img src="'+res.data.records[i].headImg+'" class="img-fluid" alt=""> </div>'
                       //var  html = '<a class="item" href="/works/detail?productNo='+res.data.records[i].mainProductNo+'" target="_blank"> <div class="item-box"> <div class="item-box-img"> <img src="'+res.data.records[i].image+'" alt=""> </div> <div class="item-box-info"> <h3>'+res.data.records[i].name+'</h3> <p>尺寸:'+res.data.records[i].bizValue5+'x'+res.data.records[i].bizValue5+'cm</p> </div> </div> </a>'
                        htmls = htmls + html;
                    }
                    $("#artist").html(htmls);
                    $('.slider-for').slick({
                        slidesToShow: 1,
                        slidesToScroll: 1,
                        arrows: false,
                        fade: true,
                        dots: false,
                        asNavFor: '.slider-nav'
                    });
                    $('.slider-nav').slick({
                        slidesToShow: 5,
                        slidesToScroll: 1,
                        asNavFor: '.slider-for',
                        dots: false,
                        centerMode: true,
                        focusOnSelect: true,
                        responsive: [{
                            breakpoint: 992,
                            settings: {
                                slidesToShow: 3,
                                slidesToScroll: 1
                            }
                        }, {
                            breakpoint: 768,
                            settings: {
                                slidesToShow: 1,
                                slidesToScroll: 1
                            }
                        }]
                    });

                    $(".slider-nav .slick-center").prev().addClass("intro-prev");
                    $(".slider-nav .slick-center").next().addClass("intro-next");

                    $(".slick-next").click(function() {
                        $(".slick-slide").removeClass("intro-prev");
                        $(".slick-slide").removeClass("intro-next");

                        $(".slider-nav .slick-center").prev().addClass("intro-prev");
                        $(".slider-nav .slick-center").next().addClass("intro-next");
                    });
                    $(".slick-prev").click(function() {
                        $(".slick-slide").removeClass("intro-prev");
                        $(".slick-slide").removeClass("intro-next");
                        $(".slider-nav .slick-center").prev().addClass("intro-prev");
                        $(".slider-nav .slick-center").next().addClass("intro-next");

                    });
                    $(".slick-slide").click(function() {
                        $(".slick-slide").removeClass("intro-prev");
                        $(".slick-slide").removeClass("intro-next");
                        $(".slider-nav .slick-center").prev().addClass("intro-prev");
                        $(".slider-nav .slick-center").next().addClass("intro-next");

                    });
                }

            },
            error: function (res) {
                isLoading = false;
            }
        });
    }
    $(function() {
        // getPageData();
        getDataList();
        // getArtistList();
    })
</script>
</body>

</html>